<!-- 产品序列号锁定 -->
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :defaults.sync="defaults"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :search.sync="search"
      :before-open="beforeOpen"
      :before-close="beforeClose"
      :permission="permissionList"
      v-model="form"
      ref="crud"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button v-if="permission.serialNoLock_unLock" type="danger" size="small" icon="el-icon-unlock" @click="handleBatchUnLock">批量解锁</el-button>
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-button v-if="permission.serialNoLock_unLock" icon="el-icon-unlock" size="small" type="text" @click="unLock(row)">解锁</el-button>
        <el-button icon="el-icon-view" size="small" type="text" @click="$refs.crud.rowView(row)">详情</el-button>
      </template>
      <template #snDataForm>
        <p>已扫/已选序列号:</p>
        <avue-crud class="snDataFormTable" :option="snDataForm.option" :data="snDataForm.data" @row-del="snDataRowDel"></avue-crud>
      </template>
    </avue-crud>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>

    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      title="选择产品序列号"
      :visible.sync="showSequenceNumberModal"
      width="50%"
      top="5vh"
      @close="closeSequenceNumberModal"
    >
      <avue-crud
        v-if="showSequenceNumberModal"
        :option="snOption"
        :table-loading="snLoading"
        :data="snData"
        :page.sync="snPage"
        ref="snCrud"
        @search-change="snSearchChange"
        @search-reset="snSearchReset"
        @selection-change="snSelectionChange"
        @current-change="snCurrentChange"
        @size-change="snSizeChange"
        @on-load="snOnLoad"
      ></avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showSequenceNumberModal = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
        <el-button type="primary" size="small" @click="sequenceNumberSubmit" v-preventReClick><i class="el-icon-circle-plus-outline"></i><span>确 定</span> </el-button>
      </span>
    </el-dialog>

    <!-- 解除锁定 -->
    <el-dialog
      class="unlock-dialog"
      append-to-body
      :close-on-click-modal="false"
      title="解锁"
      :visible.sync="unlockDialog.show"
      width="50%"
      top="5vh"
      @close="closeUnlockDialog"
    >
      <h3 class="custom-title" v-if="unLockType === 'single'"><i class="el-icon-vertical-bar mr10"></i>锁定信息</h3>
      <avue-form v-if="unLockType === 'single'" ref="unlockRef" v-model="unlockDialog.form" :option="unlockDialog.option"></avue-form>
      <h3 class="custom-title"><i class="el-icon-vertical-bar mr10"></i>解除锁定</h3>
      <avue-form ref="unlockRemarkRef" v-model="unlockDialog.remarkForm" :option="unlockDialog.remarkOption"></avue-form>
      <avue-crud v-if="unLockType === 'single'" :option="unlockDialog.tableOption" :data="unlockDialog.table" @row-del="tableRowDel"></avue-crud>
      <h3 class="custom-title" v-if="unLockType != 'single'"><i class="el-icon-vertical-bar mr10"></i>选中锁定信息</h3>
      <avue-crud v-if="unLockType != 'single'" :option="unlockDialog.selectProductOption" :data="unlockDialog.selectProductData">
        <template slot="productSns" slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.productSns" placement="top-start">
            <span>{{ scope.row.productSns }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="{ index }" slot="menu">
          <el-button icon="el-icon-delete" size="small" type="text" @click="productDel(index)">删除</el-button>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="unlockDialog.show = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
        <el-button type="primary" size="small" @click="handleunLockSubmit" v-preventReClick><i class="el-icon-circle-plus-outline"></i><span>解 锁</span> </el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import { getList, snLock, unLock, getDetail, getProductSn, batchUnLock } from '@/api/quality/serialNoLock';
import { getProcess } from '@/api/product/productSerialNumManage';
import { mapGetters } from 'vuex';
export default {
  components: {
    CommonModalTemplate
  },
  data() {
    return {
      unLockType: 'single', // 解锁类型:单个解锁还是批量解锁
      rowData: {},
      search: {},
      viewDialog: false,
      routeList: [],
      rowInfo: {},
      option: {
        height: 'calc(100vh - 380px)',
        calcHeight: 30,
        searchShow: true,
        searchSpan: 5,
        searchMenuSpan: 24,
        searchMenuPosition: 'right',
        border: true,
        index: true,
        selection: true,
        dialogClickModal: false,
        addBtn: true,
        addBtnText: '新增锁定',
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        tip: false,
        indexLabel: '序号',
        dialogWidth: '50%',
        menuWidth: 150,
        dialogCustomClass: 'snData-table-class',
        column: [
          {
            label: '工单号',
            prop: 'workOrderNo',
            search: true,
            searchOrder: 4,
            display: false
          },
          {
            label: '产品编码',
            prop: 'productPartNo',
            search: true,
            searchOrder: 2,
            display: false
          },
          {
            label: '产品名称',
            prop: 'productPartName',
            display: false
          },
          {
            label: '产品型号',
            prop: 'productPartModel',
            display: false,
            search: true,
            searchOrder: 3
          },
          {
            label: '锁定原因',
            prop: 'lockReason',
            display: false
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicData: [
              { label: '已锁定', value: 1 },
              { label: '已解锁', value: 2 }
            ],
            display: false,
            html: true,
            formatter: (val) => {
              switch (val.status) {
                case 2:
                  return `<span class="stateWords-success">已解锁</span>`;
                case 1:
                  return `<span class="stateWords-danger">已锁定</span>`;
                default:
                  break;
              }
            }
          },
          {
            label: '操作人',
            prop: 'lockByName',
            display: false,
            width: 100
          },
          {
            label: '操作时间',
            prop: 'lockTime',
            search: true,
            searchOrder: 1,
            searchSpan: 8,
            searchType: 'datetimerange',
            display: false,
            type: 'date',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
          },
          {
            label: '已锁定时间',
            prop: 'lockDuration',
            display: false
          }
        ],
        group: [
          {
            label: '工单信息',
            prop: 'partInfo',
            arrow: false,
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '工单号',
                prop: 'workOrderNo',
                type: 'search',
                disabled: true,
                appendClick: () => {
                  this.openModal('workOrderNo');
                },
                rules: [
                  {
                    required: true,
                    message: '请选择工单号',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '产品名称',
                prop: 'productPartName',
                disabled: true
              },
              {
                label: '产品编码',
                prop: 'productPartNo',
                disabled: true
              },
              {
                label: '产品型号',
                prop: 'productPartModel',
                disabled: true
              }
            ]
          },
          {
            label: '锁定序列号',
            prop: 'lockDimension',
            arrow: false,
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '产品序列号',
                prop: 'sequenceNumber',
                span: 12,
                type: 'search',
                placeholder: '请选择序列号或扫描序列号',
                enter: (value) => {
                  this.handleEnterSn(value, 'lock');
                },
                appendClick: () => {
                  if (!this.form.workOrderNo) {
                    this.$message.warning('请先选择工单号!');
                    return;
                  }
                  this.showSequenceNumberModal = true;
                  this.snStatus = 1;
                  this.snQuery = {
                    workOrderNo: this.form.workOrderNo,
                    status: 1
                  };
                  // 据工单号查询工序列表
                  let routeName = this.findObject(this.snOption.column, 'routeName');
                  getProcess(this.form.workOrderId).then((res) => {
                    let data = this._get(res, 'data.data.processRouteVOList', []);
                    routeName.dicData = data.map((d) => {
                      return {
                        label: d.routeName,
                        value: d.routeName
                      };
                    });
                  });
                },
                rules: [
                  {
                    required: false,
                    message: '请输入产品序列号',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '',
                labelWidth: 0,
                prop: 'snData',
                span: 24,
                formslot: true
              },
              {
                label: '锁定原因',
                prop: 'lockReason',
                type: 'textarea',
                row: true,
                span: 24,
                maxRows: 3,
                minRows: 3,
                rules: [
                  {
                    required: true,
                    message: '请输入锁定原因',
                    trigger: 'blur'
                  }
                ]
              }
            ]
          }
        ]
      },
      unlockDialog: {
        show: false,
        form: {},
        option: {
          submitBtn: false,
          emptyBtn: false,
          detail: true,
          column: [
            { label: '工单号', prop: 'workOrderNo' },
            { label: '产品名称', prop: 'productPartName' },
            { label: '产品编码', prop: 'productPartNo' },
            { label: '产品型号', prop: 'productPartModel' },
            { label: '锁定原因', prop: 'lockReason', type: 'textarea', span: 24, maxRows: 3, minRows: 3 }
          ]
        },
        remarkForm: {},
        remarkOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '解锁说明',
              prop: 'unlockReason',
              type: 'textarea',
              span: 24,
              maxRows: 3,
              minRows: 3,
              rules: [
                {
                  required: true,
                  message: '请输入解锁说明',
                  trigger: 'submit'
                }
              ]
            },
            {
              label: '',
              prop: 'unlockType',
              labelWidth: 0,
              span: 24,
              display: false,
              type: 'radio',
              dicData: [
                { label: '全部解锁', value: 'ALL' },
                { label: '部分解锁', value: 'PART' }
              ],
              value: 'ALL',
              change: (val) => {
                this.changeUnlockType(val);
              }
            },
            {
              label: '产品序列号',
              prop: 'sequenceNumber',
              span: 12,
              type: 'search',
              display: false,
              placeholder: '请选择序列号或扫描序列号',
              enter: (value) => {
                this.handleEnterSn(value, 'unlock');
              },
              appendClick: () => {
                this.showSequenceNumberModal = true;
                this.snStatus = 3;
                this.snQuery = {
                  workOrderNo: this.unlockDialog.form.workOrderNo,
                  sns: this.unlockDialog.form.productSns,
                  status: 3
                };
                // 据工单号查询工序列表
                let routeName = this.findObject(this.snOption.column, 'routeName');
                getProcess(this.unlockDialog.form.workOrderId).then((res) => {
                  let data = this._get(res, 'data.data.processRouteVOList', []);
                  routeName.dicData = data.map((d) => {
                    return {
                      label: d.routeName,
                      value: d.routeName
                    };
                  });
                });
              },
              rules: [
                {
                  required: false,
                  message: '请输入产品序列号',
                  trigger: 'submit'
                }
              ]
            }
          ]
        },
        table: [],
        tableOption: {
          height: '200px',
          calcHeight: 30,
          border: true,
          index: true,
          selection: false,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: true,
          refreshBtn: false,
          columnBtn: false,
          tip: false,
          indexLabel: '序号',
          menu: false,
          column: [
            {
              label: '产品序列号',
              prop: 'sequenceNumber'
            }
          ]
        },
        allLockSn: [],
        selectProductData: [],
        selectProductOption: {
          height: '200px',
          calcHeight: 30,
          border: true,
          index: true,
          selection: false,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: false,
          refreshBtn: false,
          columnBtn: false,
          tip: false,
          indexLabel: '序号',
          menu: true,
          menuWidth: 100,
          column: [
            { label: '工单号', prop: 'workOrderNo' },
            { label: '产品编码', prop: 'productPartNo' },
            { label: '产品名称', prop: 'productPartName' },
            { label: '产品型号', prop: 'productPartModel' },
            { label: '产品序列号', prop: 'productSns' },
            { label: '锁定原因', prop: 'lockReason' }
          ]
        }
      },
      snDataForm: {
        option: {
          height: '200px',
          calcHeight: 30,
          searchShow: true,
          searchSpan: 5,
          searchMenuSpan: 5,
          border: true,
          index: true,
          selection: false,
          dialogClickModal: false,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: true,
          refreshBtn: false,
          columnBtn: false,
          tip: false,
          indexLabel: '序号',
          dialogWidth: '50%',
          menuWidth: 100,
          column: [
            {
              label: '产品序列号',
              prop: 'sequenceNumber'
            }
          ]
        },
        data: []
      },
      unlockData: {
        option: {
          height: '200px',
          calcHeight: 30,
          searchShow: true,
          searchSpan: 5,
          searchMenuSpan: 5,
          border: true,
          index: true,
          selection: false,
          dialogClickModal: false,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: true,
          refreshBtn: false,
          columnBtn: false,
          tip: false,
          indexLabel: '序号',
          dialogWidth: '50%',
          menu: false,
          column: [
            {
              label: '产品序列号',
              prop: 'sequenceNumber'
            },
            {
              label: '工单号',
              prop: 'workOrderNo'
            }
          ]
        },
        data: []
      },
      defaults: {},
      loading: true,
      data: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      form: {
        objectDimensionIdList: []
      },
      query: {},
      selectionList: [],
      modalName: '',
      tableOption: {},
      timer: new Date().getTime(), //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
      showSequenceNumberModal: false,
      snOption: {
        height: 'calc(100vh - 480px)',
        calcHeight: 30,
        searchShow: true,
        searchSpan: 8,
        searchMenuSpan: 8,
        border: true,
        index: true,
        selection: true,
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        refreshBtn: false,
        columnBtn: false,
        tip: false,
        indexLabel: '序号',
        column: [
          {
            label: '产品序列号',
            prop: 'sn',
            search: true,
            hide: true,
            searchLabelWidth: 95
          },
          {
            label: '产品序列号',
            prop: 'sequenceNumber',
            width: 220
          },
          {
            label: '所在工序',
            prop: 'routeName',
            search: true,
            type: 'select',
            dicData: []
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicData: [
              {
                label: '生产中',
                value: 1
              },
              {
                label: '已完成',
                value: 2
              },
              {
                label: '锁定',
                value: 3
              },
              {
                label: '维修',
                value: 4
              },
              {
                label: '报废',
                value: 5
              },
              {
                label: '停用',
                value: 6
              }
            ]
          }
        ]
      },
      snData: [],
      snPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      snLoading: false,
      snSelectionList: [],
      snQuery: {},
      snStatus: 1
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.serialNoLock_add, false)
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  methods: {
    searchChange(params, done) {
      if (params.lockTime && params.lockTime.length > 0) {
        params.startTime = params.lockTime[0];
        params.endTime = params.lockTime[1];
        delete params.lockTime;
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records.map((item) => {
          item.status = 1;
          return item;
        });
        this.loading = false;
        this.selectionClear();
      });
    },
    handleEnterSn(value, type) {
      let params = {};
      if (type === 'lock') {
        if (!this.form.workOrderNo) {
          this.$message.warning('请先选择工单号');
          return false;
        }
        params = {
          workOrderNo: this.form.workOrderNo,
          sn: value
        };
      } else {
        params = {
          workOrderNo: this.unlockDialog.form.workOrderNo,
          sn: value,
          sns: this.unlockDialog.form.productSns
        };
      }
      getProductSn(this.snPage.currentPage, this.snPage.pageSize, params).then((res) => {
        let data = res.data.data;
        let snData = data.records[0];
        if (type === 'lock') {
          if (!snData) {
            this.$message.warning('产品序列号不存在!');
            this.form.sequenceNumber = '';
            return;
          }
          if (snData.status != 1) {
            this.$message.warning('产品序列号状态不是生产中，不能锁定!');
            this.form.sequenceNumber = '';
            return;
          }
          let obj = this._find(this.snDataForm.data, { sequenceNumber: snData.sequenceNumber });
          if (obj) {
            this.$message.warning('产品序列号已存在!');
            this.form.sequenceNumber = '';
            return;
          }
          this.snDataForm.data.push(snData);
          this.form.sequenceNumber = '';
        } else {
          if (!snData) {
            this.$message.warning('产品序列号不存在!');
            this.unlockDialog.remarkForm.sequenceNumber = '';
            return;
          }
          if (snData.status != 3) {
            this.$message.warning('产品序列号状态不是锁定，不能解锁!');
            this.unlockDialog.remarkForm.sequenceNumber = '';
            return;
          }
          let obj = this._find(this.unlockDialog.table, { sequenceNumber: snData.sequenceNumber });
          if (obj) {
            this.$message.warning('产品序列号已存在!');
            this.unlockDialog.remarkForm.sequenceNumber = '';
            return;
          }
          this.unlockDialog.table.push(snData);
          this.unlockDialog.remarkForm.sequenceNumber = '';
        }
      });
    },
    tableRowDel(row, index) {
      this.unlockDialog.table.splice(index, 1);
    },
    /**
     * 打开工单选择模态框
     */
    openModal() {
      this.$refs.commonModalTemplate.showModal();
      this.modalName = 'workOrderModal';
      this.tableOption = {
        modalTitle: '选择工单信息（双击进行选择）',
        url: '/api/mes-product/work-order/page?workOrderStatus=1,2,3',
        isPage: true,
        index: false,
        rowSelectionType: 'single',
        searchMenuSpan: 24,
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true,
            searchType: 'input'
          },
          {
            label: '生产工单',
            prop: 'workOrderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'type',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '工单数量',
            prop: 'planQuantity'
          },
          {
            label: '产品编码',
            prop: 'productPartNo',
            searchType: 'input'
          },
          {
            label: '产品名称',
            prop: 'productPartName'
          },
          {
            label: '计划开始时间',
            prop: 'planStartTime'
          },
          {
            label: '计划结束时间',
            prop: 'planEndTime'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            search: true,
            dicData: [
              {
                label: '待排程',
                value: 1
              },
              {
                label: '待生产',
                value: 2
              },
              {
                label: '生产中',
                value: 3
              },
              {
                label: '完工',
                value: 4
              },
              {
                label: '锁定',
                value: 5
              },
              {
                label: '强制完工',
                value: 6
              }
            ]
          }
        ]
      };
    },
    // 获取选择的模态框行数据
    getSelectedRows(rowData) {
      switch (this.modalName) {
        case 'workOrderModal':
          this.form.workOrderId = this._get(rowData, 'id', '');
          this.form.workOrderNo = this._get(rowData, 'workOrderNo', '');
          this.form.productPartId = this._get(rowData, 'productPartId', '');
          this.form.productPartNo = this._get(rowData, 'productPartNo', '');
          this.form.productPartName = this._get(rowData, 'productPartName', '');
          this.form.productPartModel = this._get(rowData, 'productPartModel', '');
          break;
        default:
          break;
      }
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    },
    snOnLoad(page, params = {}) {
      this.snLoading = true;
      getProductSn(page.currentPage, page.pageSize, Object.assign(params, this.snQuery)).then((res) => {
        const data = res.data.data;
        this.snPage.total = data.total;
        this.snData = data.records;
        this.snLoading = false;
        this.snSelectionClear();
      });
    },
    snSearchChange(params, done) {
      this.snQuery.sn = params.sn;
      this.snQuery.routeName = params.routeName;
      this.snPage.currentPage = 1;
      this.snOnLoad(this.snPage, params);
      done();
    },
    snSearchReset() {
      this.snQuery.sn = '';
      this.snQuery.routeName = '';
      this.snOnLoad(this.snPage);
    },
    snSelectionChange(list) {
      this.snSelectionList = list;
    },
    snCurrentChange(currentPage) {
      this.snPage.currentPage = currentPage;
    },
    snSizeChange(pageSize) {
      this.snPage.pageSize = pageSize;
    },
    snSelectionClear() {
      this.snSelectionList = [];
      this.$refs.snCrud.toggleSelection();
    },
    sequenceNumberSubmit() {
      this.showSequenceNumberModal = false;
      this._forEach(this.snSelectionList, (item) => {
        if (this.snStatus === 1) {
          let obj = this._find(this.snDataForm.data, { sequenceNumber: item.sequenceNumber });
          if (!obj) {
            this.snDataForm.data.push(item);
          }
        } else {
          let obj = this._find(this.unlockDialog.table, { sequenceNumber: item.sequenceNumber });
          if (!obj) {
            this.unlockDialog.table.push(item);
          }
        }
      });
    },
    closeSequenceNumberModal() {
      this.snQuery = {};
      this.snSelectionClear();
      this.snPage = {
        pageSize: 20,
        currentPage: 1,
        total: 0
      };
    },
    rowSave(row, done, loading) {
      if (this.snDataForm.data.length === 0) {
        this.$message.warning('请添加序列号！');
        loading();
        return;
      }
      let params = {
        workOrderId: row.workOrderId,
        workOrderNo: row.workOrderNo,
        productPartId: row.productPartId,
        productPartNo: row.productPartNo,
        productPartName: row.productPartName,
        productPartModel: row.productPartModel,
        lockReason: row.lockReason
      };
      params.productSns = this.snDataForm.data.map((item) => item.sequenceNumber).join(',');
      snLock(params)
        .then((res) => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: res.data.msg
          });
          done();
        })
        .catch(() => {
          loading();
        });
    },
    // 操作-解除锁定
    unLock(row, done) {
      this.unLockType = 'single';
      this.unlockDialog.show = true;
      let unlockType = this.findObject(this.unlockDialog.remarkOption.column, 'unlockType');
      unlockType.display = true;
      this.$set(this.unlockDialog.remarkForm, 'unlockType', 'ALL');
      getDetail(row.id).then((res) => {
        this.unlockDialog.form = this._get(res, 'data.data', {});
        let data = this.unlockDialog.form.productSns.split(',');
        this.unlockDialog.table = data.map((item) => {
          return {
            sequenceNumber: item
          };
        });
        this.unlockDialog.allLockSn = this._cloneDeep(this.unlockDialog.table);
      });
    },
    handleBatchUnLock() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.unLockType = 'batch';
      this.unlockDialog.show = true;
      let unlockType = this.findObject(this.unlockDialog.remarkOption.column, 'unlockType');
      unlockType.display = false;
      this.unlockDialog.selectProductData = this.selectionList;
    },
    productDel(index) {
      this.unlockDialog.selectProductData.splice(index, 1);
    },
    closeUnlockDialog() {
      if (this.unLockType === 'single') {
        this.$refs.unlockRef.resetFields();
        this.unlockDialog.form = {};
        this.unlockDialog.table = [];
        this.unlockDialog.allLockSn = [];
      } else {
        this.unlockDialog.selectProductData = [];
      }
      this.$refs.unlockRemarkRef.resetFields();
      this.unlockDialog.remarkForm = {};
    },
    beforeClose(done) {
      done();
    },
    // 解除锁定确认
    handleunLockSubmit() {
      this.$refs.unlockRemarkRef.validate((valid, done, msg) => {
        if (valid) {
          if (this.unLockType === 'single') {
            if (this.unlockDialog.table.length === 0) {
              this.$message.warning('请至少添加一条锁定序列号');
              done();
              return;
            }
            unLock({
              lockProductId: this.unlockDialog.form.id,
              unlockType: this.unlockDialog.remarkForm.unlockType,
              productSns: this.unlockDialog.table.map((item) => item.sequenceNumber).join(','),
              unlockReason: this.unlockDialog.remarkForm.unlockReason
            })
              .then((res) => {
                this.unlockDialog.show = false;
                this.onLoad(this.page);
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
              })
              .finally(() => done());
          } else {
            if (this.unlockDialog.selectProductData.length === 0) {
              this.$message.warning('请选择至少一条锁定信息');
              done();
              return;
            }
            batchUnLock({
              lockProductIdList: this.unlockDialog.selectProductData.map((item) => item.id),
              unlockReason: this.unlockDialog.remarkForm.unlockReason
            })
              .then((res) => {
                this.unlockDialog.show = false;
                this.onLoad(this.page);
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                this.selectionList = [];
                this.$refs.crud.toggleSelection();
              })
              .catch((err) => {})
              .finally(() => {
                done();
              });
          }
        }
      });
    },
    beforeOpen(done, type) {
      if (['view'].includes(type)) {
        let sequenceNumber = this.findObject(this.option.group[1].column, 'sequenceNumber');
        sequenceNumber.display = false;
        this.snDataForm.option.menu = false;
        getDetail(this.form.id).then((res) => {
          this.form = this._get(res, 'data.data', {});
          let data = this.form.productSns.split(',');
          this.snDataForm.data = data.map((item) => {
            return {
              sequenceNumber: item
            };
          });
        });
      }
      if (['add'].includes(type)) {
        let sequenceNumber = this.findObject(this.option.group[1].column, 'sequenceNumber');
        sequenceNumber.display = true;
        this.snDataForm.option.menu = true;
        this.snDataForm.data = [];
      }
      done();
    },
    viewDetail(row) {
      this.rowData = row; // 基本信息
      this.viewDialog = true;
    },
    snDataRowDel(row) {
      let index = this.snDataForm.data.findIndex((item) => item.sequenceNumber == row.sequenceNumber);
      this.snDataForm.data.splice(index, 1);
    },
    changeUnlockType(val) {
      let sequenceNumber = this.findObject(this.unlockDialog.remarkOption.column, 'sequenceNumber');
      if (val.value === 'ALL') {
        sequenceNumber.display = false;
        this.unlockDialog.table = this.unlockDialog.allLockSn;
        this.unlockDialog.tableOption.menu = false;
      } else {
        sequenceNumber.display = true;
        this.unlockDialog.table = [];
        this.unlockDialog.tableOption.menu = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-table {
  margin-bottom: 10px;
}
.tdStyle {
  background: #fafafa;
  font-weight: 700;
  color: #909399;
  text-align: right;
  width: auto;
  padding-right: 20px;
  white-space: nowrap;
}
td {
  padding: 5px;
  border: 1px solid #ebeef5;
}
.detail-title {
  font-weight: bold;
  font-size: 14px;
  margin: 10px 0;
}
.unlock-dialog {
  ::v-deep .el-dialog__body {
    padding-top: 0;
    .avue-crud__menu {
      display: none;
    }
  }
  ::v-deep .avue-form__menu {
    display: none;
  }
}
.snDataFormTable {
  ::v-deep .el-card__body {
    .avue-crud__menu {
      display: none;
    }
  }
}
.snData-table-class {
  .avue-crud__menu {
    display: none;
  }
}
.custom-title {
  font-size: 16px;
  font-weight: bold;
  .mr10 {
    margin-right: 10px;
  }
}
</style>
